<template>
  <div class="reg">
    <div class="wrap">
      <div class="steps">
        <el-steps :active="active" finish-status="success">
          <el-step title="验证信息"></el-step>
          <el-step title="完善信息"></el-step>
          <el-step title="完成注册"></el-step>
        </el-steps>
      </div>
      <div class="box">
        <div class="title">
          <img src="@/assets/home/logo.png" alt>
          <div class="tip">
            <h2>{{tip}}</h2>
            <i class="iconfont icon-r"></i>
          </div>
        </div>

        <div class="form">
          <el-form
            v-show="active === 0"
            :rules="rules"
            ref="form"
            :model="form"
            label-width="100px"
            style="width: 425px;margin: 20px auto 0;"
          >
            <el-form-item label="手机号:" prop="phone">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="登录密码:" prop="pass">
              <el-input v-model="form.pass" show-password></el-input>
            </el-form-item>
            <el-form-item label="确认密码:" prop="pass1">
              <el-input v-model="form.pass1" show-password></el-input>
            </el-form-item>
            <el-form-item label="短信验证码:" prop="ma">
              <el-col :span="10">
                <el-input v-model="form.ma"></el-input>
              </el-col>
              <el-col :span="8" style="margin-left: 10px;">
                <el-button @click="sendMa" :disabled="disabled">{{text}}</el-button>
              </el-col>
            </el-form-item>
            <el-form-item prop="read">
              <div>
                <el-checkbox v-model="form.read">我已阅读并接受</el-checkbox>
                <span @click="chuang">《校园食安服务条款》</span>
              </div>
            </el-form-item>
            <div style="display:flex;justify-content:space-between;margin-top:20px;">
              <router-link to="/login">
                <el-button style="width:200px;">登录</el-button>
              </router-link>
              <el-button @click="yanzheng" type="success" style="width:200px;">下一步</el-button>
            </div>
          </el-form>

          <el-form
            class="form2"
            v-show="active === 1"
            :rules="rules"
            ref="form2"
            :model="form"
            label-width="130px"
            style="width: 425px;margin: 20px auto 0;"
          >
            <el-form-item label="姓名:" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="用户名:" prop="userName">
              <el-input v-model="form.userName"></el-input>
            </el-form-item>
            <el-form-item label="邮箱:" prop="email">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="所属区域:" prop="area">
              <el-select v-model="form.area.Svalue" placeholder="请选择省" class="sheng" @change="top">
                <el-option
                  v-for="item in sheng"
                  :key="item.area_id"
                  :label="item.area_name"
                  :value="item.area_id"
                ></el-option>
              </el-select>
              <el-select
                v-model="form.area.Svalue1"
                placeholder="请选择市"
                class="shi"
                @change="content"
              >
                <el-option
                  v-for="item in shi.city_list"
                  :key="item.area_id"
                  :label="item.area_name"
                  :value="item.area_id"
                ></el-option>
              </el-select>
              <el-select v-model="form.area.Svalue2" placeholder="请选择区" class="qu">
                <el-option
                  v-for="item in qu.county_list"
                  :key="item.area_id"
                  :label="item.area_name"
                  :value="item.area_id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="学校地址:" prop="schoolAddress">
              <el-input v-model="form.schoolAddress"></el-input>
            </el-form-item>
            <el-form-item label="学校名称:" prop="schoolName">
              <el-input v-model="form.schoolName"></el-input>
            </el-form-item>
            <el-form-item label="负责人姓名:" prop="schoolUserName">
              <el-input v-model="form.schoolUserName"></el-input>
            </el-form-item>
            <el-form-item label="负责人联系电话:" prop="schoolUserPhone">
              <el-input v-model="form.schoolUserPhone"></el-input>
            </el-form-item>
            <el-form-item label="监管部门:" prop="department">
              <el-select
                v-model="form.department.Svalue"
                placeholder="请选择省"
                class="sheng"
                @change="top1"
              >
                <el-option
                  v-for="item in sheng"
                  :key="item.area_id"
                  :label="item.area_name"
                  :value="item.area_id"
                ></el-option>
              </el-select>
              <el-select
                v-model="form.department.Svalue1"
                placeholder="请选择市"
                class="shi"
                @change="content1"
              >
                <el-option
                  v-for="item in shi.city_list"
                  :key="item.area_id"
                  :label="item.area_name"
                  :value="item.area_id"
                ></el-option>
              </el-select>
              <el-select v-model="form.department.Svalue2" placeholder="请选择区" class="qu">
                <el-option
                  v-for="item in qu.county_list"
                  :key="item.area_id"
                  :label="item.area_name"
                  :value="item.area_id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input v-model="form.bumen" disabled=""></el-input>
            </el-form-item>
            <div style="display:flex;justify-content:center;margin-top:20px;">
              <el-button @click="wanshan" type="success" style="width:200px;">提交</el-button>
            </div>
          </el-form>
          <div v-show="active === 2">
            <div class="from3_tip">
              <i style="font-size:30px;padding-right:10px;" class="el-icon-finished"></i> 您的信息已提交成功，目前正在审核中，请耐心等待！
            </div>
            <div style="display:flex;justify-content: flex-end;">
              <router-link to="/">
                <el-button type="success" size="small ">回首页</el-button>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>

    <transition name="el-fade-in-linear">
      <div class="mask" v-show="isChuang" @click="chuang"></div>
    </transition>

    <transition name="el-fade-in">
      <Fuwu :isChuang="isChuang" :chuang="chuang"></Fuwu>
    </transition>
  </div>
</template>

<script>
import Fuwu from "@/components/Fuwu.vue";
// @ is an alias to /src
export default {
  name: "reg",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.form.pass !== "") {
          this.$refs.form.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var danxuan = (rule, value, callback) => {
      if (value == false) {
        callback(new Error("请阅读并接受服务条款"));
      } else {
        callback();
      }
    };
    var checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (!value) {
        return callback(new Error("邮箱不能为空"));
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的邮箱格式"));
        }
      }, 100);
    };
    var checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/;
      if (!value) {
        return callback(new Error("电话号码不能为空"));
      }
      setTimeout(() => {
        // Number.isInteger是es6验证数字是否为整数的方法,但是我实际用的时候输入的数字总是识别成字符串
        // 所以我就在前面加了一个+实现隐式转换

        if (!Number.isInteger(+value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (phoneReg.test(value)) {
            callback();
          } else {
            callback(new Error("电话号码格式不正确"));
          }
        }
      }, 100);
    };

    return {
      active: 0,
      tip: "验证信息",
      sheng: [],
      shi: [],
      qu: [],

      form: {
        phone: "",
        pass: "",
        pass1: "",
        ma: "",
        read: false,

        name: "",
        userName: "",
        email: "",
        area: {
          Svalue: "",
          Svalue1: "",
          Svalue2: ""
        },
        schoolAddress: "",
        schoolName: "",
        schoolUserName: "",
        schoolUserPhone: "",
        department: {
          Svalue: "",
          Svalue1: "",
          Svalue2: ""
        },
        bumen:'市场监督管理局'
      },
      text: "获取验证码",
      disabled: false,

      isChuang: false,
      rules: {
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            len: 11,
            message: "手机号格式不正确",
            trigger: "blur"
          }
        ],
        pass: [
          { validator: validatePass, required: true, trigger: "blur" },
          { min: 6, max: 12, message: "密码长度为6-12位", trigger: "blur" }
        ],
        pass1: [{ validator: validatePass2, required: true, trigger: "blur" }],
        ma: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          {
            len: 4,
            message: "验证码格式不正确",
            trigger: "blur"
          }
        ],
        read: [{ validator: danxuan, required: true, trigger: "change" }],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        email: [{ validator: checkEmail, required: true, trigger: "blur" }],
        area: [
          {
            type: "object",
            required: true,
            trigger: "change",
            fields: {
              Svalue: {
                type: "number",
                required: true,
                message: "请选择省份",
                trigger: "blur"
              },
              Svalue1: {
                type: "number",
                required: true,
                message: "请选择城市",
                trigger: "blur"
              },
              Svalue2: {
                type: "number",
                required: true,
                message: "请选择县市",
                trigger: "blur"
              }
            }
          }
        ],
        schoolAddress: [
          { required: true, message: "请输入学校地址", trigger: "blur" }
        ],
        schoolName: [
          { required: true, message: "请输入学校名称", trigger: "blur" }
        ],
        schoolUserName: [
          { required: true, message: "请输入负责人姓名", trigger: "blur" }
        ],
        schoolUserPhone: [
          { required: true, validator: checkPhone, trigger: "blur" }
        ],
        department: [
          {
            type: "object",
            required: true,
            trigger: "change",
            fields: {
              Svalue: {
                type: "number",
                required: true,
                message: "请选择省份",
                trigger: "blur"
              },
              Svalue1: {
                type: "number",
                required: true,
                message: "请选择城市",
                trigger: "blur"
              },
              Svalue2: {
                type: "number",
                required: true,
                message: "请选择县市",
                trigger: "blur"
              }
            }
          }
        ]
      }
    };
  },
  methods: {
    next(e) {
      this.active = e;
    },
    top() {
      this.shi = this.sheng.filter(
        item => item.area_id === this.form.area.Svalue
      )[0];
      this.form.area.Svalue1 = "";
      this.form.area.Svalue2 = "";
    },
    top1() {
      this.shi = this.sheng.filter(
        item => item.area_id === this.form.department.Svalue
      )[0];
      this.form.department.Svalue1 = "";
      this.form.department.Svalue2 = "";
    },
    content() {
      this.qu = this.shi.city_list.filter(
        item => item.area_id === this.form.area.Svalue1
      )[0];
    },
    content1() {
      this.qu = this.shi.city_list.filter(
        item => item.area_id === this.form.department.Svalue1
      )[0];
    },
    yanzheng() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.active = 1;
          this.tip = "完善信息";
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    wanshan() {
      this.$refs["form2"].validate(valid => {
        if (valid) {
          this.active = 2;
          this.tip = "完成注册";
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    chuang() {
      this.isChuang = !this.isChuang;
    },
    sendMa() {
      this.disabled = true;
      let miao = 60;
      let timer = setInterval(() => {
        miao--;
        if (miao === 0) {
          clearInterval(timer);
          this.text = "重新发送验证码";
          this.disabled = false;
        } else {
          this.text = `${miao}秒后可重新获取`;
        }
      }, 1000);
    }
  },
  created() {
    this.$http.get(`http://m.xyucd.com:7000/address-list`).then(res => {
      // console.log(res);
      let { data } = res.data;
      this.sheng = data;
    });
  },
  components: {
    Fuwu
  }
};
</script>
<style lang="scss" scoped >
@import "@/assets/css/index.scss";
.reg {
  height: 100vh;
  background: url(../assets/login/web_login_reg_bg.jpg) no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  .wrap {
    width: 640px;
    height: 480px;
    margin-top: 50px;
    .steps {
      width: 80%;
      margin: 20px auto;
      padding-left: 25px;
    }
    .box {
      margin-top: 30px;
      background: $navbg;
      box-sizing: border-box;
      border-radius: 10px;
      padding: 30px 50px;
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        img {
          width: 115px;
          height: 26px;
        }
        .tip {
          position: relative;
          color: $txt;
          text-shadow: 8px 8px 8px #919090;
          h2 {
            font-size: 20px;
          }
          i {
            position: absolute;
            right: -20px;
            top: 10px;
          }
        }
      }
    }
  }
  .form2 {
    padding-right: 52px;
    max-height: 300px;
    overflow: auto;
  }
  .from3_tip {
    color: $txt;
    text-align: center;
    padding: 20px 0px;
  }
  .mask {
    position: absolute;
    z-index: 8;
    width: 100vw;
    height: 100vh;
    background: rgba(39, 39, 39, 0.671);
  }
}
</style>
<style >
.steps .el-step__main .el-step__title {
  text-indent: -1em;
}
</style>
